<template>
  <el-dialog title="添加学段" :visible.sync="isAddLearningPeriod" width="30%" :before-close="handleClose" :close-on-click-modal='false'>
    <el-form ref="form" :model="form" label-width="80px" size="small">
      <el-form-item label="学段名称">
        <el-select v-model="form.section_title" placeholder="请选择学段名称" @change="eductionalSystmeFn()">
          <el-option v-for="item in learningPeriodData" :key="item.id" :label="item.title" :value="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学制选择" v-if="isEducational">
        <el-select v-model="form.school_system_id" placeholder="请选择学制">
          <el-option v-for="item in eductionalSystmeData" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" v-if="isName">
        <el-input v-model="form.name" placeholder="填写自定义名称"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="checkFn()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {APILEARNINGPERIOD, APIADDLEARNINGPERIOD} from '@/common/api.js'
export default {
  props: ['isAddLearningPeriod', 'row'],
  data () {
    return {
      form: {
        section_title: '',
        school_system_id: '',
        name: ''
      },
      list: {
        id: 0,
        title: '自定义名称'
      },
      learningPeriodData: [],
      eductionalSystmeData: [],
      isEducational: false,
      isName: false
    }
  },
  created () {
    this.learningPeriodFn()
  },
  methods: {
    learningPeriodFn () { // 学段
      APILEARNINGPERIOD().then((res) => {
        this.learningPeriodData = res.data
        this.learningPeriodData.push(this.list)
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    eductionalSystmeFn () { // 学制
      this.eductionalSystmeData = []
      this.form.school_system_id = ''
      if (this.form.section_title !== '自定义名称') {
        this.isEducational = true
        this.isName = false
        this.learningPeriodData.forEach(item => {
          if (this.form.section_title === item.title) {
            this.eductionalSystmeData = item.sub_list
          }
        })
      } else {
        this.isEducational = false
        this.isName = true
      }
    },
    handleClose () {
      this.$emit('noAddLearningPeriod')
    },
    close (type) {
      this.$emit('noAddLearningPeriod', type)
    },
    checkFn () {
      if (this.form.section_title === '') {
        this.$message.warning('学段名称不能为空')
        return false
      }
      if (this.form.section_title !== '自定义名称' && this.form.school_system_id === '') {
        this.$message.warning('学制不能为空')
        return false
      }
      if (this.form.section_title === '自定义名称' && this.form.name === '') {
        this.$message.warning('自定义名称不能为空')
        return false
      }
      this.submit()
    },
    submit () { // 提交
      console.log(this.row)
      var type
      this.learningPeriodData.forEach(element => {
        if (this.form.section_title === '自定义名称') {
          this.form.section_title = this.form.name
          type = 1
        } else if (element.section_id === this.form.section_title) {
          this.form.section_title = element.title
          type = 0
        }
      })
      APIADDLEARNINGPERIOD({
        school_id: this.row.id,
        section_title: this.form.section_title,
        school_system_id: this.form.school_system_id,
        type: type
      }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.close(1)
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
